import { ReactNode } from 'react'
import { motion } from 'framer-motion'
import { Link } from 'react-router-dom'

interface ButtonProps {
  children: ReactNode
  to?: string
  href?: string
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
  onClick?: () => void
  className?: string
  type?: 'button' | 'submit' | 'reset'
  disabled?: boolean
  fullWidth?: boolean
}

function Button({
  children,
  to,
  href,
  variant = 'primary',
  size = 'md',
  onClick,
  className = '',
  type = 'button',
  disabled = false,
  fullWidth = false,
}: ButtonProps) {
  const baseClasses = 'inline-flex items-center justify-center font-medium rounded-apple transition-all duration-300 ease-apple'
  
  const variantClasses = {
    primary: 'bg-primary-500 hover:bg-primary-600 text-white shadow-sm hover:shadow-md disabled:bg-primary-300',
    secondary: 'bg-secondary-100 hover:bg-secondary-200 dark:bg-secondary-800 dark:hover:bg-secondary-700 text-secondary-900 dark:text-secondary-100 disabled:bg-secondary-50 dark:disabled:bg-secondary-900 disabled:text-secondary-400',
    outline: 'border-2 border-primary-500 text-primary-500 hover:bg-primary-50 dark:hover:bg-primary-900/20 disabled:border-primary-300 disabled:text-primary-300',
  }
  
  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-5 py-2.5 text-base',
    lg: 'px-7 py-3 text-lg',
  }
  
  const widthClass = fullWidth ? 'w-full' : ''
  
  const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${widthClass} ${className} ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`
  
  // Animation properties
  const buttonAnimation = {
    tap: { scale: 0.97 },
    hover: { 
      y: -3,
      transition: { duration: 0.2 }
    }
  }
  
  if (to) {
    return (
      <motion.div whileHover="hover" whileTap="tap" variants={buttonAnimation}>
        <Link to={to} className={classes}>
          {children}
        </Link>
      </motion.div>
    )
  }
  
  if (href) {
    return (
      <motion.div whileHover="hover" whileTap="tap" variants={buttonAnimation}>
        <a href={href} className={classes} target="_blank" rel="noopener noreferrer">
          {children}
        </a>
      </motion.div>
    )
  }
  
  return (
    <motion.button
      type={type}
      onClick={onClick}
      className={classes}
      disabled={disabled}
      whileHover={disabled ? {} : "hover"}
      whileTap={disabled ? {} : "tap"}
      variants={buttonAnimation}
    >
      {children}
    </motion.button>
  )
}

export default Button